<template>
  <el-steps
    class="_ehl_step"
    :direction="verticalMode ? 'vertical' : 'horizontal'"
    :space="space"
    process-status="process"
    finish-status="process"
  >
    <el-step v-for="(item, index) in step" :key="index">
      <template v-slot:icon>
        <div
          v-if="timeMode"
          @click="stepClick(item)"
          :class="['_ehl_step_normal', { _ehl_step_select: tab >= index }]"
        >
        </div>
        <div
          v-else
          @click="stepClick(item)"
          :class="['_ehl_step_normal', { _ehl_step_select: tab === index }]"
        >
        </div>
      </template>
      <template v-slot:title>
        <div
          v-if="timeMode"
          :class="['_ehl_step_font_normal', { _ehl_step_font_select: tab >= index }]"
          @click="stepClick(item)"
          >{{ item[label_p] }}
        </div>
        <div
          v-else
          :class="['_ehl_step_font_normal', { _ehl_step_font_select: tab === index }]"
          @click="stepClick(item)"
          >{{ item[label_p] }}
        </div>
      </template>
    </el-step>
  </el-steps>
</template>
<script>
  import Vue from 'vue'
  import { Steps, Step } from 'element-ui'
  Vue.use(Steps)
  Vue.use(Step)
  export default {
    props: {
      //数据
      step: { type: Array, default: () => [] },
      //间隔
      space: { type: Number, default: () => 100 },
      //初始节点号
      initTab: { type: Number, default: () => 0 },
      //时间线模式
      timeMode: { type: Boolean, default: () => false },
      //竖直模式
      verticalMode: { type: Boolean, default: () => false },
      //value的key映射
      prop: {
        type: Object,
        default: () => ({ label: 'label', value: 'value', tab: 'tab' }),
      },
    },
    data() {
      return { tab: this.initTab, label_p: this.prop['label'], tab_p: this.prop['tab'] }
    },
    methods: {
      stepClick(item) {
        this.tab = item[this.tab_p]
        this.$emit('click', item)
      },
    },
  }
</script>
